<template>
	<div class="superInviter">
		<!-- 状态 -->
		<div class="inquire_box">
			<div class="serch_box">
				<el-input v-model="conditions.merchName" placeholder="请输入商户名称" />
				<el-input v-model="conditions.merchPhone" placeholder="请输入联系电话" />
				<el-select v-model="conditions.stakeValue" placeholder="请选择出资方">
					<el-option v-for="item in conditions.stake" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
				<el-select v-model="conditions.statusOptionsValue" placeholder="请选择状态">
					<el-option v-for="item in conditions.statusOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
				<el-button type="primary" @click="serchBtn">搜索</el-button>
				<el-button type="primary" @click="resetBtn">重置</el-button>
			</div>
		</div>

		<!-- 表格 -->
		<div v-loading="loading" class="table_box">
			<el-table :data="tableData" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" border style="width: 100%;">
				<el-table-column prop="merchName" label="邀请商户名称" />
				<el-table-column prop="merchPhone" label="联系电话" />
				<el-table-column prop="address" label="商户总部地址" />
				<el-table-column prop="stakeValue" label="出资方">
					<template slot="header" slot-scope="scope">
						<span>出资方</span>
						<el-tooltip popper-class="el-tooltip-theme-fresh" placement="top" effect="light">
							<div slot="content">出资方指优惠折扣或活动优惠的钱由谁承担</div>
							<i class="el-icon-question" />
						</el-tooltip>
					</template>
					<template slot-scope="scope">
						<p>{{ scope.row.stakeValue }}</p>
					</template>
				</el-table-column>
				<el-table-column prop="marketCon" label="活动内容">
					<template slot-scope="scope">
						<div @click="marketConBtn(scope.row)" style="color: deepskyblue; cursor: pointer;">{{ scope.row.marketCon }}</div>
					</template>
				</el-table-column>
				<el-table-column prop="marketTime" label="活动有效期" />
				<!-- 1未激活，2进行中 ，3已暂停，4已终止，5已过期，6报名中 -->
				<el-table-column prop="marketStatus" label="活动状态">
					<template slot-scope="scope">
						<p>
							{{
								scope.row.marketStatus === 1
									? '未激活'
									: scope.row.marketStatus === 2
									? '进行中'
									: scope.row.marketStatus === 3
									? '已暂停'
									: scope.row.marketStatus === 4
									? '已终止'
									: scope.row.marketStatus === 5
									? '已过期'
									: '报名中'
							}}
						</p>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="signUpTime" label="报名有效期" /> -->
				<el-table-column prop="cyStatus" label="参与状态">
					<template slot-scope="scope">
						<p>{{ scope.row.cyStatus === 1 ? '未处理' : scope.row.cyStatus === 2 ? '已参与' : '已拒绝' }}</p>
						<p v-if="scope.row.activityStatus" style="color: red">{{ scope.row.activityStatus }}</p>
						<p v-if="scope.row.marketStatus === 4" style="color: red">{{ scope.row.operaLog }}</p>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="discount" label="优惠折扣">
					<template slot-scope="scope">
						<div>{{ scope.row.discount }}折</div>
						<div v-if="scope.row.afterDiscount" :key="Math.random()" style="color: red;">{{ scope.row.afterDiscount }}折 待确定</div>
					</template>
				</el-table-column> -->
				<!-- <el-table-column prop="commission" label="抽佣比例">
					<template slot-scope="scope">
						<div>{{ scope.row.commission }}%</div>
						<div v-if="scope.row.afterRakeRate" :key="Math.random()" style="color: red;">{{ scope.row.afterRakeRate }}% 未确定</div>
					</template>
				</el-table-column> -->
				<!-- <el-table-column>
					<template slot="header" slot-scope="scope">
						<span>积分抵扣比例</span>
						<el-tooltip popper-class="el-tooltip-theme-fresh" placement="top" effect="light">
							<div slot="content">指用户可使用积分抵扣金额比例，抵扣的钱邀请商户补贴给合作商户</div>
							<i class="el-icon-question" />
						</el-tooltip>
					</template>
					<template slot-scope="scope">
						<p>{{ scope.row.integralProportion }} %</p>
					</template>
				</el-table-column> -->
				<!-- <el-table-column v-if="statusIndex == 0" :key="Math.random()" prop="time" label="参与时间" /> -->
				<el-table-column :key="Math.random()" label="操作">
					<template slot-scope="scope">
						<div v-if="scope.row.type == 0">
							<el-button
								:disabled="scope.row.cyStatus === 2 || scope.row.marketStatus === 4 || scope.row.marketStatus === 5"
								type="text"
								size="small"
								@click="changeDialog(scope.row, 1)"
							>
								参与
							</el-button>
							<el-button
								:disabled="
									scope.row.cyStatus === 1 ||
										(scope.row.cyStatus !== 1 && scope.row.cyStatus !== 2) ||
										scope.row.marketStatus === 4 ||
										scope.row.marketStatus === 5
								"
								type="text"
								size="small"
								@click="changeDialog(scope.row, 2)"
							>
								拒绝
							</el-button>
						</div>
						<div v-else>
							<el-button :disabled="scope.row.abc != 'ok'" type="text" size="small" @click="changeDialog(scope.row, 1)">参与</el-button>
							<el-button :disabled="scope.row.abc == 'ok' || scope.row.activityStatus == '活动已关闭'" type="text" size="small" @click="changeDialog(scope.row, 2)">
								拒绝
							</el-button>
						</div>
					</template>
				</el-table-column>

				<!-- <el-table-column v-if="statusIndex == 1" :key="Math.random()" prop="exTime" label="退出时间" />
				<el-table-column v-if="statusIndex == 1" :key="Math.random()" prop="exParty" label="退出操作方" /> -->
			</el-table>
		</div>

		<pag-ination :page-total="pagTotal" @pageNum="getPageNum" @pageSize="getPageSize" />
	</div>
</template>

<script>
import pagInation from '../../components/pagInation/index.vue';
import { mapGetters } from 'vuex';
import { activityAvailableQuery, participateIn, refuse } from '@/api/business';
export default {
	components: {
		'pag-ination': pagInation
	},
	data() {
		return {
			business: '',
			/* 状态 */
			status_list: [
				{
					id: 0,
					txt: '合作中'
				},
				{
					id: 1,
					txt: '已退出'
				}
			],

			/* 查询 */
			conditions: {
				merchName: '',
				merchPhone: '',
				stake: [
					{
						value: 1,
						label: '本商户'
					},
					{
						value: 2,
						label: '合作商户'
					}
				],
				stakeValue: '',
				// 状态
				statusOptions: [
					{
						value: 1,
						label: '未处理'
					},
					{
						value: 2,
						label: '已参与'
					},
					{
						value: 3,
						label: '已拒绝'
					}
				],
				statusOptionsValue: '',
				pageNum: 1,
				pageSize: 10
			},
			pagTotal: null,
			loading: false,

			/* 表格 */
			tableData: [],
			rowConten: ''
		};
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	mounted() {
		this.business = this.userInfo.business;
		this.inviterQueryCooperationRecordFun();
	},
	methods: {
		statusBtn(index) {
			this.statusIndex = index;
			this.inviterQueryCooperationRecordFun();
		},
		/* 条件查询 */
		serchBtn() {
			this.inviterQueryCooperationRecordFun();
		},
		resetBtn() {
			this.cleanConditionsFun();
			this.inviterQueryCooperationRecordFun();
		},
		// 清空条件
		cleanConditionsFun() {
			this.conditions.merchName = '';
			this.conditions.merchPhone = '';
			this.conditions.stakeValue = '';
			this.conditions.statusOptionsValue = '';
		},
		// 获取分页
		getPageNum(val) {
			this.conditions.pageNum = val;
			this.inviterQueryCooperationRecordFun();
		},
		getPageSize(val) {
			this.conditions.pageSize = val;
			this.inviterQueryCooperationRecordFun();
		},

		/* 表格 */
		changeDialog(row, type) {
			this.rowConten = row;
			const { id } = this.rowConten;
			let params = {
				couponActivityId: id
			};
			if (type == 1) {
				this.$confirm('参与后，用户可在本店享受当前活动优惠', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.participateInFun(params);
				});
			} else {
				this.$confirm('拒绝后，用户不可在本店享受当前活动优惠', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.refuseFun(params);
				});
			}
		},
		// 内容点击
		marketConBtn(e) {
			console.log('内容点击', e);
			let { couponType, denomination, transactionMinimum, maxUseNum, startTime, endTime, discountMaximum, discountPercent, type, bizDescMap } = e;
			// for (let i = 0; i < 10; i++) {
			// 	bizDescMap.detail.push(`折扣${i}`);
			// }

			// let { timeType, days, availablePeriod, startMinute1, endMinute1, startMinute2, endMinute2, startMinute3, endMinute3 } = e.availableTimeVO;

			// cash代金券 discount折扣券 exchange兑换券 cash_wx_busi微信商家代金券

			// 由于时间段显示问题，暂时隐藏20220706
			// <p style="text-align: center;margin-top: 20px;">${
			// 	timeType == 1
			// 		? `生效后${days}天可用`
			// 		: timeType == 2
			// 		? `每周指定星期:${availablePeriod}`
			// 		: timeType == 3
			// 		? `规则日期可用:${availablePeriod}`
			// 		: timeType == 4
			// 		? '不规则日期可用:'
			// 		: '任意时间段可用'
			// }</p>

			// 	<div style="text-align: center;margin-top: 20px;display: ${timeType == 2 ? '' : 'none'}">
			// 		<p style="display: ${startMinute1 != null ? '' : 'none'}">${startMinute1} ~ ${endMinute1}</p>
			// 		<p style="display: ${startMinute2 != null ? '' : 'none'}">${startMinute2} ~ ${endMinute2}</p>
			// 		<p style="display: ${startMinute3 != null ? '' : 'none'}">${startMinute3} ~ ${endMinute3}</p>
			// 	</div>
			// 	<div style="text-align: center;margin-top: 20px;display: ${timeType == 3 ? '' : 'none'}">
			// 		<p style="display: ${startMinute1 != null ? '' : 'none'}">${startMinute1} ~ ${endMinute1}</p>
			// 		<p style="display: ${startMinute2 != null ? '' : 'none'}">${startMinute2} ~ ${endMinute2}</p>
			// 		<p style="display: ${startMinute3 != null ? '' : 'none'}">${startMinute3} ~ ${endMinute3}</p>
			// 	</div>
			// 	<div style="text-align: center;margin-top: 20px;display: ${timeType == 4 ? '' : 'none'}">
			// 		<p style="display: ${startMinute1 != null ? '' : 'none'}">${startMinute1} ~ ${endMinute1}</p>
			// 		<p style="display: ${startMinute2 != null ? '' : 'none'}">${startMinute2} ~ ${endMinute2}</p>
			// 		<p style="display: ${startMinute3 != null ? '' : 'none'}">${startMinute3} ~ ${endMinute3}</p>
			// 	</div>

			if (type == 0) {
				if (couponType == 'cash' || couponType == 'exchange' || couponType == 'cash_wx_busi') {
					this.$alert(
						`
					<p>券面额：${denomination / 100}元</p>

					<p>门槛：满 ${transactionMinimum / 100} 元可使用，最多可叠加 ${maxUseNum} 张</p>

					<p>有效期：${startTime} ~ ${endTime}</p>
					`,
						'活动内容',
						{
							dangerouslyUseHTMLString: true
						}
					);
				} else {
					this.$alert(
						`
					<p>折扣：${discountPercent / 10}折</p>

					<p>门槛：满 ${transactionMinimum / 100} 元可使用</p>

					<p>优惠上限：单最高优惠${discountMaximum / 100}元</p>

					<p>有效期：${startTime} ~ ${endTime}</p>
					`,
						'活动内容',
						{
							dangerouslyUseHTMLString: true
						}
					);
				}
			} else if (type == 1) {
				let arr = [];
				bizDescMap.detail.forEach(val => {
					let list = `<p>${val}</p>`;
					arr.push(list);
				});
				this.$alert(
					`
				<p>会员日：${bizDescMap.title}</p>
				<div style="width:100%; max-height:300px; overflow-y: auto">
					<div class="tit" style="float:left">会员折扣：</div>
					<div class="list" style="float:left">
						${arr.join('')}
					</div>
				</div>
				`,
					'会员日折扣详情',
					{
						dangerouslyUseHTMLString: true
					}
				);
			}
		},
		// 请求合作列表
		inviterQueryCooperationRecordFun() {
			const from = {
				financingParty: this.conditions.stakeValue, //出资方
				merchant: this.business.id,
				merchantName: this.conditions.merchName,
				merchantPhone: this.conditions.merchPhone,
				page: this.conditions.pageNum,
				pageSize: this.conditions.pageSize,
				participationStatus: this.conditions.statusOptionsValue
			};
			activityAvailableQuery(from).then(res => {
				console.log('活动', res);
				if (res.code == 0) {
					this.pagTotal = res.data.total;
					const data = res.data.list;
					const tableData = [];
					data.forEach(el => {
						const dataItem = {
							merchName: el.merchantName,
							merchPhone: el.merchantPhone,
							address: el.merchantCoreAddress,
							stakeValue: el.financingParty == 1 ? '邀请者' : '参与者',
							marketCon: el.activityContent,
							marketTime: el.type == 0 ? `${el.startTime} ~ ${el.endTime}` : '长期',
							marketStatus: el.status, //活动状态 1未激活，2进行中 ，3已暂停，4已终止，5已过期，6报名中,
							signUpTime: el.type == 0 ? `${el.signUpStartTime} ~ ${el.signUpEndTime}` : '长期',

							cyStatus: el.participationStatus,
							abc: (el.participationStatus == 1 || el.participationStatus == 3) && el.activityStatus == 0 ? 'ok' : null,
							activityStatus: el.activityStatus != 0 && el.participationStatus == 3 ? '活动已关闭' : '',
							// discount: el.discountDesc,
							// afterDiscount: el.afterDiscount,
							// commission: el.rakeRate,
							// integralProportion: 13,
							// afterRakeRate: el.afterRakeRate,
							// time: el.updateTime,
							id: el.id,
							// status: el.status == 0 ? '已退出' : '合作中',
							// exTime: el.exitTime,
							// exParty: el.exitType == 1 ? '邀请者取消合作' : '本商户取消合作',

							// businessId: el.businessId,
							// businessName: el.businessName
							couponType: el.couponType, //cash代金券 discount折扣券 exchange兑换券 cash_wx_busi微信商家代金券
							denomination: el.denomination, //代金券抵扣金额
							discountPercent: el.discountPercent, //折扣比例
							maxUseNum: el.maxUseNum, //能够叠加多少张
							discountMaximum: el.discountMaximum, //折扣优惠金额
							startTime: el.startTime, //开始时间
							endTime: el.endTime, //结束时间
							transactionMinimum: el.transactionMinimum, //优惠券使用门槛
							availableTimeVO: el.availableTimeVO,
							type: el.type,
							bizDescMap: el.bizDescMap, //活动
							operaLog: el.operaLog
						};
						tableData.push(dataItem);
					});
					this.tableData = tableData;
					console.log('this.tableData', this.tableData);
				}
			});
		},
		// 参与
		participateInFun(params) {
			participateIn(params).then(res => {
				console.log('参与活动', res);
				if (res.code == 0) {
					this.inviterQueryCooperationRecordFun();
				}
			});
		},
		// 拒绝
		refuseFun(params) {
			refuse(params).then(res => {
				console.log('拒绝活动', res);
				if (res.code == 0) {
					this.inviterQueryCooperationRecordFun();
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.inquire_box {
	width: 100%;
	overflow: hidden;
	margin-top: 20px;
	padding: 20px;
	background-color: white;

	.status_list {
		width: 100%;
		overflow: hidden;
		.li {
			float: left;
			margin: 8px;
			margin-right: 30px;
			cursor: pointer;
		}
	}

	.serch_box {
		width: 100%;
		overflow: hidden;
		margin-top: 20px;
		.el-input,
		.el-select {
			width: 250px;
			float: left;
			margin-right: 20px;
		}
	}
}
.tipRule {
	background-color: white;
	padding: 20px;
	padding-top: 0;
	box-sizing: border-box;
	color: red;
	line-height: 21px;
	font-size: 12px;
}
.table_box {
	width: 100%;
	overflow: hidden;
	padding: 20px;
	background-color: white;
}
</style>
